import React, { Component } from 'react'
import { connect } from 'react-redux'
import { actionCreators } from './store'
import {
  HeaderWrapper,
  Container,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoList,
  SearchInfoItem,
  Addition,
  Button,
  SearchWarpper,
  SearchInfo
} from './style'
import { Link } from 'react-router-dom'

class Header extends Component {
  getListArea() {
    const {
      focused,
      mouseIn,
      list,
      page,
      totalPage,
      handleMouseEnter,
      handleMouseLeave,
      handleChangePage
    } = this.props
    const newList = list.toJS()
    const pageLength = 10
    const pageList = []
    if (newList.length) {
      for (let i = (page - 1) * pageLength; i < (page * pageLength) && newList.length > i; i++) {
        pageList.push(
          <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
        )
      }
    }

    if (focused || mouseIn) {
      return (
        <SearchInfo
          onMouseEnter={() => {
            handleMouseEnter()
          }}
          onMouseLeave={() => {
            handleMouseLeave()
          }}
        >
          <SearchInfoTitle>
            热门搜索
            <SearchInfoSwitch onClick={() => { handleChangePage(page, totalPage, this.spin) }}>
              <i ref={(icon) => { this.spin = icon }} className="sky-leaf spin">&#xe851;</i>
              换一批
            </SearchInfoSwitch>
          </SearchInfoTitle>
          <SearchInfoList>{pageList}</SearchInfoList>
        </SearchInfo>
      )
    } else {
      return null
    }
  }
  render() {
    const { focused, onBlurInput, onFocusInput, list } = this.props
    return (
      <HeaderWrapper>
        <Container>
          <Logo />
          <Nav>
            <Link to='/'>
              <NavItem className="left active">首页</NavItem>
            </Link>
            <NavItem className="left down">下载App</NavItem>
            <NavItem className="right">登录</NavItem>
            <NavItem className="right">
              <i className="sky-leaf">&#xe636;</i>
            </NavItem>
            <SearchWarpper>
              <NavSearch
                onBlur={() => {
                  onBlurInput()
                }}
                onFocus={() => {
                  onFocusInput(list)
                }}
                className={focused ? 'focused' : ''}
              />
              <i className={focused ? 'focused sky-leaf zoom' : 'sky-leaf zoom'}>
                &#xe614;
              </i>
              {this.getListArea()}
            </SearchWarpper>
          </Nav>
          <Addition>
            <Button className="reg">注册</Button>
            <Button className="writting">
              <i className="sky-leaf">&#xe615;</i>
              写文章
            </Button>
          </Addition>
        </Container>
      </HeaderWrapper>
    )
  }
}

const mapStateToProps = state => {
  return {
    /* immutable数据需要get方法 */
    focused: state.getIn(['header', 'focused']),
    list: state.getIn(['header', 'list']),
    page: state.getIn(['header', 'page']),
    totalPage: state.getIn(['header', 'totalPage']),
    mouseIn: state.getIn(['header', 'mouseIn'])
    // state.get('header').get('focused')
  }
}

const mapDispathToProps = dispatch => {
  return {
    onFocusInput(list) {
      /* 创建action*/
      /* 派发action */
      (list.size === 0 && dispatch(actionCreators.getList()))
      dispatch(actionCreators.searchFocus())
    },
    onBlurInput() {
      dispatch(actionCreators.searchBlur())
    },
    handleMouseEnter() {
      dispatch(actionCreators.mouseEnter())
    },
    handleMouseLeave() {
      dispatch(actionCreators.mouseLeave())
    },
    handleChangePage(page, totalPage, spin) {
      let originAngle = spin.style.transform.replace(/[^0-9]/ig, '')
      if (originAngle) {
        originAngle = parseInt(originAngle, 10)
      } else {
        originAngle = 0
      }
      spin.style.transform = `rotate(${originAngle + 360}deg)`
      if (page < totalPage) {
        dispatch(actionCreators.changePage(page + 1))
      } else {
        dispatch(actionCreators.changePage(1))
      }
    }
  }
}

export default connect(
  mapStateToProps,
  mapDispathToProps
)(Header)
